<template>
  <main id="home" class="view" role="main" style=" touch-action: y;">
    <div class="view_1" style="display: none;" ><img src="http://h5.tel.gzzsu.com/09987ede7ae64f7382130c795aa64afd.jpg" width="750" height="576" alt=""></div>
    <div class="viewcen">
      <div class="view_4">品质保障 | 售后无忧 | 店铺口碑分4.98</div>
      <div class="view_2">
        <h1>深圳联通王卡畅想版</h1>
        <h2>135G全国通用流量</h2>
      </div>
      <div class="view_3" style="height: 50px;">
        <div class="view_3_1">
          价格：<div style="font-size: 0.3rem;display: flex;color:red;font-weight: bold">29<span>元/月</span></div>
        </div>
      </div>
      <div class="view_5">
        <div class="view_5_tit"><span>全国通用流量</span><span>通话时间</span><span>归属地</span></div>
        <div class="view_5_cen"><span>135G</span><span>100分钟</span><span>深圳市</span></div>
      </div>

      <div class="view_7">商品详情</div>
      <div class="view_8">
        <div class="view_text"><img src="http://h5.tel.gzzsu.com/8bda9.jpg" width="750" height="1353" alt=""></div>
        <!--商品详情-->
        <!--<div class="view_kong">资料更新中...</div>--><!--商品详情没上传时显示-->
      </div>
    </div>
    <md-action-bar :actions="action_data" @click="showPopUpMain('align')">
    </md-action-bar>
    <md-popup class="inner-popup" v-model="isPopupShowMain.align" position="bottom" >
      <md-popup-title-bar only-close middle-radius title="下单系统" title-align="center" @cancel="hidePopUpMain('align')" ></md-popup-title-bar>
      <div class="md-example-popup md-example-popup-align">
        <md-scroll-view :scrolling-x="false" :scrolling-y="false">
          <div class="md-example-child md-example-child-picker md-example-child-picker-2">
            <p style="font-size: 14px; background-color: #2b68e9;color: #fbf8f8;height:25px;text-align: center;padding-top: 5px;">入网信息（根据国家实名制要求，请准确提供身份证信息）</p>
            <md-field>
              <md-input-item  ref="cert_name" title="姓名" v-model="cert_name" clearable placeholder="请输入姓名" :maxlength="50">
                <md-icon name="right" :svg="false" color="red" slot="left">*</md-icon>
              </md-input-item>
              <md-input-item  ref="input0" title="身份证号码" v-model="cert_no"  clearable placeholder="请输入身份证号码" :maxlength="50">
                <md-icon name="right" :svg="false" color="red" slot="left">*</md-icon>
              </md-input-item>
              <md-input-item  ref="input1" title="联系电话" v-model="cert_num"  clearable placeholder="请输入联系电话"  :maxlength="20" >
                <md-icon name="right" :svg="false" color="red" slot="left">*</md-icon>
              </md-input-item>
            </md-field>
            <md-picker ref="picker2" v-model="isPickerShow2"
                       :data="pickerValueSomeCity" :cols="2" is-cascade large-radius title="选择归属地省市" @change="onPickerConfirm2"  @confirm="onPickerConfirm2" ></md-picker>
            <md-field>
              <md-input-item  ref="input12" title="归属地" placeholder="请选择归属地"   @focus="isPickerShow2 = true" readonly v-model="picker2Value" >
                <md-icon name="right" :svg="false" color="red" slot="left">*</md-icon>
                <icon name="info" slot="right" style="font-size: 14px;width:40px;height:40px;" @click="isPickerShow2 = true">点击获取</icon>
              </md-input-item>
            </md-field>
            <md-field>
              <md-input-item  title="选择号码" v-model="select_mobile_number" @focus="showPopUp('bottom')"  placeholder="双击请选择号码"  readonly >
                <md-icon name="right" :svg="false" color="red" slot="left">*</md-icon>
                <icon name="info" slot="right" style="font-size: 14px;width:40px;height:40px;" @click="showPopUp('bottom')">点击获取</icon>
              </md-input-item>
            </md-field>
            <md-field>
              <md-input-item title="省市区/县" arrow="arrow"  placeholder="请选择省市区/县" v-model="pickerValue1" readonly  @focus="isPickerShow1 = true">
                <md-icon name="right" :svg="false" color="red" slot="left">*</md-icon>
                <icon name="info" slot="right" style="font-size: 14px;width:40px;height:40px;" @click="isPickerShow1 = true">点击获取</icon>
              </md-input-item>
            </md-field>
            <md-field>
              <md-input-item  ref="input12" title="详细地址" placeholder="请输入详细地址"   v-model="address" >
                <md-icon name="right" :svg="false" color="red" slot="left">*</md-icon></md-input-item>
            </md-field>
            <md-picker  ref="picker1" @change="onPickerConfirm" v-model="isPickerShow1" :data="pickerData1" :cols="3" is-cascade large-radius title="选择省市区/县"
                        :default-index="pickerDefaultIndex"  @confirm="onPickerConfirm"
                        :default-value="pickerDefaultValue"    @initialed="onPickerInitialed" ></md-picker>
            <div class="md-example-child md-example-child-agree md-example-child-0">
              <md-agree v-model="agreeConf.checked" :disabled="agreeConf.disabled" :size="agreeConf.size"
                        @change="onChange(agreeConf.name, agreeConf.checked, $event)"  style="height:30px;">我已阅读并同意《客户入网服务协议及业务协议》
              </md-agree>
            </div>
            <div style="margin-left: 50px;font-size: 14px;" @click="readProtocol" size="sm">查看客户入网服务协议及业务协议</div>
            <div style="font-size: 14px;float:left;margin: 15px 10px 0px 10px; "> 1、未满16周岁的，因政策原因不发货，请勿下单。</div>
            <div style="font-size: 14px;float:left;margin: 5px 10px; "> 2、请保持电话畅通，我们将随时可能与您联系。 </div>
            <md-button type="primary" @click="createOrder" v-if="agree_yes">
              <span>确认保存</span>
            </md-button>
            <md-button type="grey" disabled @click="createOrderNotAgree" v-if="agree_no">
              <span>确认保存</span>
            </md-button>
          </div>
        </md-scroll-view>
      </div>
    </md-popup>

    <md-popup v-model="isPopupShow.bottom" position="bottom" >
      <md-popup-title-bar
        title="号码选择"
        cancel-text="取消"
        large-radius
        @confirm="hidePopUp('bottom')"
        @cancel="hidePopUp('bottom')"
      ></md-popup-title-bar>
      <div class="md-example-popup md-example-popup-bottom">
        <div class="choose_left_1" >
          <div class="choose_center_1" v-for="(item,index) in allMobileListToShowLineOne"  @click="choose_number(item,index)"  >{{item}}</div>
        </div>
        <div class="choose_right_1">
          <div class="choose_center_1" v-for="(item,index) in allMobileListToShowLineTwo"  @click="choose_number(item, index)" >{{item}}</div>
        </div>
        <div class="choose_next_1">
          <md-button type="warning" size="small" style="font-size: 18px;margin-top: 10px;padding: 5px 10px;" inline>换一批</md-button>
        </div>
      </div>
    </md-popup>
  </main>

</template>

<script>
import { ActionBar, Popup, Button, InputItem, Toast, ActivityIndicator, Dialog, DropMenu, PopupTitleBar, CheckBox, Picker, Field, FieldItem, Agree, NoticeBar, Icon, ScrollView } from 'mand-mobile'
import districtSomeCity from 'mand-mobile/components/picker/demo/data/district2'
import districtOneCity from 'mand-mobile/components/picker/demo/data/districtOneCity'
import axios from 'axios'

export default {
  name: 'home-view',
  components: {
    [ActionBar.name]: ActionBar,
    [CheckBox.name]: CheckBox,
    [Popup.name]: Popup,
    [NoticeBar.name]: NoticeBar,
    [InputItem.name]: InputItem,
    [Button.name]: Button,
    [ActivityIndicator.name]: ActivityIndicator,
    [DropMenu.name]: DropMenu,
    [Picker.name]: Picker,
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
    [Agree.name]: Agree,
    [Icon.name]: Icon,
    [PopupTitleBar.name]: PopupTitleBar,
    [ScrollView.name]: ScrollView
  },
  data () {
    return {
      action_data: [
        {
          text: '免费领取',
          round: true
        }
      ],
      isPopupShowMain: {},
      cert_name: '', // 姓名
      cert_no: '', // 身份证号码
      cert_num: '', // 自己电话，非购买的
      loading: false,
      isPickerShow1: false,
      isPickerShow2: false,
      pickerData1: districtSomeCity ,
      pickerData2: [],
      pickerData3: [],
      pickerValue1: '',
      pickerValueSomeCity: districtOneCity,
      provinceList: [],
      agreeConf: {
        checked: false,
        name: 'agree0',
        size: 'md',
        disabled: false,
        introduction: '选中状态'
      },
      open: false,
      url: {
        list: '/agentgetcity',
        agentgetprotocol: '/agentgetprotocol',
        getMobilelist: '/agentselectnumber',
        saveOrder: '/agentorderadd',
        orderNotice: '/agentordernotice',
        agentgetcustinfo: '/agentgetcustinfo',
        gettoken: '/gettoken'
      },
      callback_url: '',
      agree_yes: false,
      agree_no: true,
      pickerData: [],
      pickerDefaultIndex: [],
      pickerDefaultValue: [],
      agentgetprotocolText: '', // 协议文本说明
      provinceValue: '',
      province2Value: '',
      cityValue: '',
      city2Value: '',
      pickerValue: '',
      picker2Value: '',
      areaValue: '',
      address: '', // 详细地址
      user_check_protocol: false,
      jsonData: [{'a': 1}],
      isPopupShow: {},
      select_mobile_number: '', // 选择的电话号码
      allMobileListToShow: [], // 初始化供选择的电话号码列表
      allMobileListToShowLineOne: [], // 初始化供选择的电话号码列表
      allMobileListToShowLineTwo: [] // 初始化供选择的电话号码列表
    }
  },
  methods: {
    onBtnClick (event, action) {

    },
    showPopUpMain (type) {
      this.$set(this.isPopupShowMain, type, true)
    },
    hidePopUpMain (type) {
      this.$set(this.isPopupShowMain, type, false)
    },
    showPopUp (type) {
      if (this.province2Value === '' || this.city2Value === '') {
        Toast.info('请先选择手机号码归属地')
        return
      }
      this.getRemoteMobile()
      this.$set(this.isPopupShow, type, true)
    },
    hidePopUp (type) {
      this.$set(this.isPopupShow, type, false)
    },
    onChange (name, checked) {
      if (checked) {
        this.user_check_protocol = true
        this.agree_yes = true
        this.agree_no = false
      } else {
        this.agree_yes = false
        this.agree_no = true
        this.user_check_protocol = false
      }
      console.log(`agree name = ${name} is ${checked ? 'checked' : 'unchecked'}`)
    },
    choose_number (number, index) {
      console.log(number)
      this.hidePopUp('bottom')
      this.select_mobile_number = number
    },
    readProtocol () {
      this.$router.push({
        'path': '/protocol'
      })
    },
    createOrderNotAgree () {
      Toast.info('您尚未查看，同意协议！')
    },
    createOrder () {
      if (this.cert_name === '') {
        Toast.info('请输入姓名')
        return
      }
      if (this.cert_no === '') {
        Toast.info('请输入身份证号码')
        return
      }
      if (this.cert_no.length > 0) {
        if (!this.isIdCard(this.cert_no)) {
          Toast.info('请输入正确的十八位身份证号码')
          return
        }
      }
      if (this.cert_num === '') {
        Toast.info('请输入手机号码')
        return
      }
      if (this.cert_num.length > 11 || this.cert_num.length < 11) {
        Toast.info('请输入正确的手机号码')
        return
      }
      if (this.province2Value === '' || this.city2Value === '') {
        Toast.info('请选择归属地')
        return
      }
      if (this.select_mobile_number === '') {
        Toast.info('请选择手机号码')
        return
      }
      if (this.provinceValue === '' || this.cityValue === '') {
        Toast.info('请选择邮寄地址')
        return
      }
      this.saveOrder()
    },
    onPickerInitialed () {
      const columnValues = this.$refs.picker1.getColumnValues()
      let value = ''
      columnValues.forEach(item => {
        value += `${item.label}-`
      })
      console.log(`getColumnValues: ${value.substr(0, value.length - 1)}`)
    },
    getColumnIndex (picker, index) {
    },
    getCityByProvince () {
    },
    getAreaByCity () {
    },
    getProvinceCity () {
    },
    // 选择邮寄省市区的地址
    onPickerConfirm (columnIndex, itemIndex, value) {
      const values = this.$refs[`picker1`].getColumnValues()
      this.pickerValue1 = ''
      values.forEach(value => {
        value && (this.pickerValue1 += `${value.text || value.label} `)
      })
      // console.log(values[0].label + '- ' + values[0].value + '- ' + values[1].label + '- ' + values[1].value + '- ' + values[2].label + '- ' + values[2].value)
      this.provinceValue = values[0].value
      this.cityValue = values[1].value
      this.areaValue = values[2].value
    },
    // 选择归属地
    onPickerConfirm2 (columnIndex, itemIndex, value) {
      // console.log(columnIndex)
      const values = this.$refs[`picker2`].getColumnValues()
      if (columnIndex === 0) {
        this.province2Value = value.value
      }
      if (columnIndex === 1) {
        this.city2Value = value.value
        // console.log('cityValue: ' + this.city2Value)
      }
      if (this.province2Value == '') {
        this.province2Value = values[0].value
      }
      if (this.city2Value == '') {
        this.city2Value = values[1].value
      }
      this.picker2Value = values[0].label + ' - ' + values[1].label
      // console.log(values[0].label + '- ' + values[0].value + '- ' + values[1].label + '- ' + values[1].value)
    },
    // 获取商家的登录凭证Token。
    gettoken () {
      let param = {
        'app_id': 'appid1',
        'app_secret': 'appsecret1'
      }
      axios.post(this.url.gettoken, param).then((r) => {
        if (r.data.data) {
          console.log(r.data.data)
        }
      })
    },
    // 获取系统公告信息，是运营商的相关规定与说明。
    agentgetcustinfo () {
      let param = {}
      axios.post(this.url.agentgetcustinfo, param).then((r) => {
        if (r.data.data) {
          console.log(r.data.data)
        }
      })
    },
    getRemoteMobile () {
      this.allMobileListToShow = []
      this.allMobileListToShowLineOne = []
      this.allMobileListToShowLineTwo = []
      if (this.province2Value < 100) {
        this.province2Value = `${this.province2Value}0000`
      }
      if (this.city2Value < 10000) {
        this.city2Value = `${this.city2Value}00`
      }
      let param = {
        'province_code': this.province2Value,
        'city_code': this.city2Value,
        'goods_id': '981610241535',
        'search_value': '',
        'amounts': 10
      }
      axios.post(this.url.getMobilelist, param).then((r) => {
        if (r.data.data) {
          if (r.data.data.length > 0) {
            for (const index in r.data.data) {
              this.allMobileListToShow.push(r.data.data[index])
              if (index < 5) {
                this.allMobileListToShowLineOne.push(r.data.data[index])
              } else if (index >= 5 && index < 10) {
                this.allMobileListToShowLineTwo.push(r.data.data[index])
              }
            }
            // console.log(this.allMobileListToShow)
          }
        }
      })
    },
    // 回调
    //   ● 1 已下单待支付
    //   ● 2 已付款待发货
    //   ● 3 已从总部发货待收货
    //   ● 4 已发货到自提点待收货
    //   ● 5 已收货签收待评价
    //   ● 6 已收货签收需要退货
    //   ● 7 已退货
    //   ● 8 已理赔
    //   ● 9 已经取消
    //   ● 10 已经完成
    orderNotice () {
      let param = {
        'type': 1
      }
      axios.post(this.url.orderNotice, param).then((r) => {
        if (r.data.data) {
          console.log(r.data.data)
        }
      })
    },
    saveOrder () {
      let param = {
        'cert_name': this.cert_name,
        'cert_num': this.select_mobile_number,
        'cert_no': this.cert_no,
        'contact_num': this.cert_num,
        'post_province_code': this.provinceValue,
        'post_city_code': this.cityValue,
        'post_district_code': this.areaValue,
        'post_addr': this.address,
        'province_code': this.province2Value,
        'city_code': this.city2Value,
        'callback_url': this.callback_url
      }
      axios.post(this.url.saveOrder, param).then((r) => {
        console.log(r.data)
        if (parseInt(r.data.code) === 0) {
          Toast.info('下单成功')
          // this.cert_name = ''
          // this.cert_no = ''
          // this.cert_num = ''
          // this.select_mobile_number = ''
          this.go_detail(r.data.data)
        } else {
          Toast.info(r.data.msg)
        }
      })
    },
    go_detail (orderId) {
      this.$router.push({
        path: '/order_detail',
        query: {id: orderId}
      })
    },
    getNetProtocol () {
      let param = {'type': 1}
      axios.post(this.url.agentgetprotocol, param).then((r) => {
        this.agentgetprotocolText = r.data.data.con
      }).finally(() => {

      })
    },
    validateIdCard (idCardNumber) {
      // 身份证号码正则表达式
      const idCardRegex = /^[1-9]\d{5}(19|20)(\d{2})(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3}(\d|X|x)$/
      if (idCardNumber && !idCardRegex.test(idCardNumber)) {
        return false
      } else {
        return true
      }
    },
    /**
     * 身份证15位编码规则：dddddd yymmdd xx p dddddd：6位地区编码 yymmdd: 出生年(两位年)月日，如：910215 xx:
     * 顺序编码，系统产生，无法确定 p: 性别，奇数为男，偶数为女
     *
     * 身份证18位编码规则：dddddd yyyymmdd xxx y dddddd：6位地区编码 yyyymmdd:
     * 出生年(四位年)月日，如：19910215 xxx：顺序编码，系统产生，无法确定，奇数为男，偶数为女 y: 校验码，该位数值可通过前17位计算获得
     *
     * 前17位号码加权因子为 Wi = [ 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2 ] 验证位
     * Y = [ 1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2 ] 如果验证码恰好是10，为了保证身份证是十八位，那么第十八位将用X来代替
     * 校验位计算公式：Y_P = mod( ∑(Ai×Wi),11 ) i为身份证号码1...17 位; Y_P为校验码Y所在校验码数组位置
     */
    isIdCard (idCard) {
      // 440102198001021230
      // 15位和18位身份证号码的正则表达式
      const regIdCard = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/

      // 如果通过该验证，说明身份证格式正确，但准确性还需计算
      if (regIdCard.test(idCard)) {
        if (idCard.length === 18) {
          var idCardWi = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10,
            5, 8, 4, 2] // 将前17位加权因子保存在数组里
          var idCardY = [1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2] // 这是除以11后，可能产生的11位余数、验证码，也保存成数组
          var idCardWiSum = 0 // 用来保存前17位各自乖以加权因子后的总和
          for (var i = 0; i < 17; i++) {
            idCardWiSum += idCard.substring(i, i + 1) * idCardWi[i]
          }

          var idCardMod = idCardWiSum % 11// 计算出校验码所在数组的位置
          var idCardLast = idCard.substring(17)// 得到最后一位身份证号码

          // 如果等于2，则说明校验码是10，身份证号码最后一位应该是X
          if (idCardMod === 2) {
            if (idCardLast === 'X' || idCardLast === 'x') {
              // alert("恭喜通过验证啦！");
              return true
            } else {
              // alert("身份证号码错误！");
              return true
            }
          } else {
            // 用计算出的验证码与最后一位身份证号码匹配，如果一致，说明通过，否则是无效的身份证号码
            if (idCardLast === idCardY[idCardMod]) {
              alert('恭喜通过验证啦！!')
              return true
            } else {
              // alert('身份证号码错误！2')
              return true
            }
          }
        } else {
          return true
        }
      } else {
        alert('身份证格式不正确!!!')
        return false
      }
    }
  },
  mounted () {
    // this.getProvinceCity()
    console.log(this.pickerValueSomeCity)
    this.getNetProtocol()
    this.pickerDefaultIndex = [0, 0, 0]
    // https://apijob.bld365.com/api/jx/sale/order/callback?productCode=SPC2023103015014000000001&bizType=10&channelCode=JX&sellerId=USR2021072300001&channelSeqId=SPO20231031000001
    // this.callback_url = location.href.split('#/?callbackUrl=')[1]
    // this.callback_url = this.$route.query.callback_url
    this.callback_url = location.href.split('?callbackUrl=')[1]
    if (!this.callback_url) {
      this.callback_url = ''
    }
    console.log(this.callback_url)
    // this.$refs.cert_name.focus()
  }
}
</script>

<style>
.md-field {
  padding: 0.1rem;
  border: none;
  background-color: #fff;
}
.heading {
  text-align: center;
  margin-bottom: 48px;
}
.heading h1 {
  color: #333;
  line-height: 1.15;
  font-size: 64px;
  margin-bottom: 32px;
}
.heading h1 span {
  position: relative;
}
.heading h1 span::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  bottom: 8px;
  width: 100%;
  height: 20px;
  background: #ecf6ff;
}
.heading p {
  font-size: 32px;
  color: #666;
  line-height: 56px;
}
.md-example-child-agree .md-agree-content {
  color: #858b9c;font-size:18px;
}
.md-example-child-agree {
  margin-top: 0px;
  padding: 0 32px;
  font-size: 18px;
}
.md-example-popup {
  position:relative;
  font-size:28px;
  font-family:DINPro;
  font-weight:500; box-sizing:border-box;
  text-align: center;
  background-color: #FFF;
}
.md-example-popup-center {
  padding: 50px;
  border-radius: radius-normal;
}
.viewcen {
  width: 94%;
  padding: 0 3%
}

.view_3 {
  margin-top: 10px
}

.md-example-popup-bottom {
  width: 100%;
  height: 500px;
  padding: 20px 0;
}
.choose_left_1{
  float:left;padding-left: 80px;
}
.choose_right_1{
  float:left;padding-left: 80px;
}
.choose_center_1{
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
}
.choose_next_1{
  height:80px;
  text-align: center;
  width:300px;
  font-size: 0.32rem;
  padding-left: 20px;
  padding-left: 10px;
  margin: 0 auto;
}
.view_1 {
  width: 100%;
  overflow: hidden;
}

.view_5 {
  border: 1px solid #f1dfa3;
  border-radius: 5px
}

.view_5_tit {
  display: flex;
  background: #fcf8eb;
  border-radius: 5px 5px 0 0;
  border-bottom: 1px solid #f1dfa3
}

.view_5_tit span {
  display: block;
  width: 33%;
  text-align: center;
  padding: 8px 0;
  color: #966417
}

.view_5_cen {
  display: flex;
  background: #fcf8eb;
  border-radius: 0 0 5px 5px;
}

.view_5_cen span {
  display: block;
  width: 33%;
  text-align: center;
  padding: 8px 0;
  color: #966417
}

.view_5_tit span:nth-child(2) {
  border-left: 1px solid #f1dfa3
}

.view_5_tit span:nth-child(3) {
  border-left: 1px solid #f1dfa3
}

.view_5_cen span:nth-child(2) {
  border-left: 1px solid #f1dfa3
}

.view_5_cen span:nth-child(3) {
  border-left: 1px solid #f1dfa3
}

.view_6 {
  display: flex;
  justify-content: space-between;
  padding-top: 20px
}

.view_6 li {
  width: 48%;
  font-size: 0.32rem;
  border-radius: 5px;
  background: #f7f7f7;
  padding: 10px 0;
  text-align: center;
}

.view_6 li:nth-child(1) span {
  font-size: 0.32rem;
  background-size: 21px;
  padding: 8px 0 8px 35px
}

.view_6 li:nth-child(2) span {
  font-size: 0.32rem;
  background-size: 21px;
  padding: 8px 0 8px 35px
}

.view_7 {
  font-weight: bold;
  font-size: 0.30rem;
  position: relative;
  padding-left: 15px;
  margin: 25px 0
}

.view_7::after {
  position: absolute;
  content: "";
  left: 0;
  top: 4px;
  width: 3px;
  height: 46px;
  background: #1a54fa;
  border-radius: 2px
}

.view_8 {
  width: 100%;
  overflow: hidden;
  padding-bottom: 65px
}

.view_8 .view_text img {
  max-width: 100%;
  height: auto
}

.view_kong {
  color: #999;
  padding: 0px 0 30px 15px
}

.view_bottom {
  position: fixed;
  bottom: 0;
  background: #fff;
  padding: 9px 3%;
  width: 94%;
  box-shadow: 0px 2px 8px #ccc;
  max-width: calc(640px - 6%);
}

.view_bottom dl {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between
}

.view_bottom dl dt {
  display: flex;
  justify-content: space-around;
  width: 42%
}

.view_bottom dl dt img {
  display: block;
  width: 19px;
  height: auto;
  margin: 0 auto
}

.view_bottom dl dt span {
  display: block;
  text-align: center;
  font-size: 0.3rem;
}

.view_bottom dl dd {
  width: 56%;
  border-radius: 100px;
  color: #fff;
  background: #1a54fa;
  text-align: center;
  line-height: 43px;
  font-size: 0.3rem;
  background-image: -webkit-linear-gradient(left top, #1a54fa,#4850f7);
  background-image: -o-linear-gradient(bottom right, #1a54fa,#4850f7);
  background-image: -moz-linear-gradient(bottom right, #1a54fa,#4850f7);
  background-image: linear-gradient(to bottom right, #1a54fa,#4850f7);
}

.lingqu {
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,0.7);
  position: fixed;
  bottom: 0;
  z-index: 888888;
  max-width: 640px;
  margin: 0 auto;
  display: none;
}

.cx_img {
  width: 100%;
  overflow: hidden
}

.cx_img img {
  display: block;
  width: 85%;
  height: auto;
  padding-top: 20px;
  margin: 0 auto
}

.cx_wo {
  position: absolute;
  left: 9%;
  top: 32%;
  background: rgba(255,255,255,1);
  width: 82%;
  border-radius: 10px;
  padding-bottom: 50px
}
.view_1 {
  width: 100%;
  overflow: hidden
}

.view_1 img {
  display: block;
  width: 100%;
  height: auto;
}

.viewcen {
  width: 94%;
  padding: 0 3%
}

.view_2 {
  padding: 22px 0
}

.view_2 h1 {
  font-size: 0.32rem;
  font-weight: bold;
  padding-bottom: 8px
}

.view_2 h2 {
  font-size: 0.28rem;
  color: #bbbaba
}

.view_3 {
  margin-top: 10px;
  font-size: 0.32rem;
}

.view_3_1 {
  display: flex;
  font-size: 0.32rem;
  align-items: flex-end
}

.view_3_1 dl {
  display: flex;
  font-size: 0.32rem;
  align-items: center
}

.view_3_1 dl dt {
  color: #ff4c15;
  font-size: 0.32rem;
  padding-top: 3px
}

.view_3_1 dl dd {
  width: 1.5rem;
  line-height: 1.0rem;
  color: #ff4c15;
  font-size: 0.32rem;
  align-items: flex-end;
  font-weight: bold;
  padding-left: 6px
}

.view_3_1 dl dd span {
  font-size: 0.32rem;
  font-weight: normal;
  padding-bottom: 3px;
  padding-left: 3px
}

.view_3_1 .bg {
  margin-left: 8px;
  margin-bottom: 3px
}

.view_3_1 .bg {
  color: #999;
  font-size: 0.30rem;
}

.view_3_1 .bg span {
  color: #999;
  font-size: 0.30rem;
  margin-left: 3px;
  text-decoration: line-through
}

.view_3_2 {
  color: #ff4c15;
  font-size: 0.32rem;
}
.view_4 {
  background: url(../assets/bg.jpg) no-repeat center center;
  font-size: 0.32rem;
  background-size: 100%;
  color: #966417;
  text-align: center;
  padding: 7px 0;
  margin-top: 10px
}

.view_5 {
  border: 1px solid #f1dfa3;
  font-size: 0.32rem;
  border-radius: 5px
}

.view_5_tit {
  font-size: 0.32rem;
  display: flex;
  background: #fcf8eb;
  border-radius: 5px 5px 0 0;
  border-bottom: 1px solid #f1dfa3
}

.view_5_tit span {
  font-size: 0.30rem;
  display: block;
  width: 33.33%;
  text-align: center;
  padding: 8px 0;
  color: #966417
}

.view_5_cen {
  display: flex;
  background: #fcf8eb;
  border-radius: 0 0 5px 5px;
}

.view_5_cen span {
  display: block;
  width: 33.33%;
  text-align: center;
  padding: 8px 0;
  color: #966417
}

.view_5_tit span:nth-child(2) {
  border-left: 1px solid #f1dfa3
}

.view_5_tit span:nth-child(3) {
  border-left: 1px solid #f1dfa3
}

.view_5_cen span:nth-child(2) {
  border-left: 1px solid #f1dfa3
}

.view_5_cen span:nth-child(3) {
  border-left: 1px solid #f1dfa3
}

</style>
